import React, {lazy, Suspense} from 'react';
import {setScrollTop,changeTdk,goSystem} from '../../assets/js/utils/index';
import 'swiper/swiper-bundle.css';
import hoc from './indexHoc';
import ScrollAnim from 'rc-scroll-anim';
import Css from '../../assets/css/benefit/index.css';
import QueueAnim from 'rc-queue-anim';

const Nav=lazy(()=>import('../../components/nav/index'));
const RNav=lazy(()=>import('../../components/rNav/index'));
const Foot=lazy(()=>import('../../components/foot/index'));

const ScrollParallax =  ScrollAnim.Parallax;
const ScrollOverPack =  ScrollAnim.OverPack;

const BenefitComponent=hoc((props)=>{
    return(
        <div>
            <div className={Css['ben_banner']} id='indSuccess'>
                {
                    props.aBan.length>0?
                        props.aBan.map((item,index)=>{
                            return(
                                <React.Fragment key={index}>
                                    <ScrollParallax className={Css['ben_ban_bg']}
                                                    location='indSuccess'
                                                    style={{backgroundImage:'url('+item.bg+')'}}
                                                    animation={{y:0, playScale: [0.9, 1.5]}}
                                    >
                                    </ScrollParallax>
                                    <div className={Css['benBanCen']}>
                                        <p dangerouslySetInnerHTML={{__html:item.title}}></p>
                                        <div className={Css['benBanBtn']} onClick={props.goPage.bind(this,item.url)}>{item.btn}</div>
                                    </div>
                                </React.Fragment>
                            )
                        })
                        :''
                }
            </div>
            {
                props.aDes.length>0?
                    props.aDes.map((item,index)=>{
                        return(
                            <div className={Css['ben_des']} key={index} dangerouslySetInnerHTML={{__html:item.title}}></div>
                        )
                    })
                    :''
            }
            <div className={Css['ben_dig']} >
                <div className={Css['ben_dig_cen']}>
                    <div className={Css['ben_title']}>
                        <strong>数字化弹性福利平台 多角色需求全覆盖</strong>
                        <p>满足企业、HR、员工、财务全方位需求</p>
                    </div>
                    <ScrollOverPack
                        always={false}
                        playScale={[0.33, 1]}

                    >
                        <QueueAnim className={Css['ben_dig_cen_list']} type={['bottom']}  component="ul">
                            {
                                props.aDig.length>0?
                                    props.aDig.map((item,index)=>{
                                        return(
                                            <li className={Css['ben_dig_cen_list_li']} key={index} onClick={props.goPage.bind(this,item.url)}>
                                                <i className={item.icn}></i>
                                                <div className={Css['ben_dig_cen_list_font']}>
                                                    <div className={Css['ben_dig_cen_list_font_title']}>{item.title}</div>
                                                    <div className={Css['ben_dig_cen_list_font_des']}>{item.list}</div>
                                                </div>
                                            </li>
                                        )
                                    })
                                    :''
                            }
                        </QueueAnim >
                    </ScrollOverPack>
                </div>
            </div>
            <div className={Css['ben_scren']} >
                <ScrollParallax
                    animation={{y:0, playScale: [0, 2]}}
                    className={Css['ben_scren_bg']}
                    style={{backgroundImage:'url(//www.guanaitong.com/images/2020/public/loading.gif)'}}  data-echo-background={require('../../assets/images/benefit/ben2.jpg')}

                ></ScrollParallax>
                <div className={Css['ben_scren_cen']}>
                    <div className={Css['ben_title']+' '+Css['ben_title_w']}>
                        <strong>360°福利场景，我们思考周到</strong>
                        <p>搭建员工福利全景画像,节日、午餐、激励、员工心理关怀、企业文化建设、体检、生日、差旅、加班……</p>
                    </div>
                    <div className={Css['ben_scren_cen_list']+' swiper-container ben_scren_cen_list'}>
                        <div className="swiper-wrapper">
                            {
                                props.aScren.length>0?
                                    props.aScren.map((item,index)=>{
                                        return(
                                            <div className="swiper-slide" key={index}>
                                                <div className={Css['ben_scren_cen_list_li']}   onClick={props.goPage.bind(this,item.url)}>
                                                    <div className={Css['ben_scren_cen_list_li_img']} >
                                                        <img data-src={item.img} className="swiper-lazy" alt=''/>
                                                        <div className={Css['activeLoading']}></div>
                                                    </div>
                                                    <div className={Css['ben_scren_cen_list_li_title']}>{item.title}</div>
                                                    {
                                                        item.list.length>0?
                                                            item.list.map((item2,index2)=>{
                                                                return(
                                                                    <div className={Css['ben_scren_cen_list_li_list']} key={index2}>
                                                                        <i className={'e60d'} ></i>
                                                                        {item2.title}
                                                                    </div>
                                                                )
                                                            })
                                                            :""
                                                    }
                                                    <div className={Css['ben_scren_cen_list_li_icn']}>
                                                        <i className={'e71e'}></i>
                                                    </div>

                                                </div>
                                            </div>
                                        )
                                    })
                                    :''
                            }
                        </div>
                        <div className={Css['ben_scren_cen_list_prev']+' ben_scren_cen_list_prev'}><i className={'e6b7'}></i></div>
                        <div className={Css['ben_scren_cen_list_next']+' ben_scren_cen_list_next'}><i className={'e647'}></i></div>
                    </div>

                </div>
            </div>
            <div className={Css['ben_paas']}>
                <div className={Css['ben_paas_cen']}>

                    <div className={Css['ben_paas_cen_swarp']}>
                        <div className={Css['ben_paas_cen_swarp_font']}>
                            {
                                props.aPaas.aFont!==undefined?
                                    props.aPaas.aFont.map((item,index)=>{
                                        let temProps='';
                                        if(index===0){
                                            temProps=props.bLouti0
                                        }else if(index===1){
                                            temProps=props.bLouti1
                                        }else if (index===2) {
                                            temProps=props.bLouti2
                                        }else  {
                                            temProps=props.bLouti3
                                        }
                                        return(
                                            <div className={temProps?Css['louti']+' '+Css['active']:Css['louti']} id={'louti'+index} key={index}>
                                                <div className={Css['ben_paas_cen_swarp_font_title']}>{item.title}</div>
                                                <div className={Css['ben_paas_cen_swarp_font_en']}>{item.enTitle}</div>
                                                <div className={Css['ben_paas_cen_swarp_font_des']}  dangerouslySetInnerHTML={{__html:item.list}}></div>
                                            </div>
                                        )
                                    })
                                    :''
                            }
                        </div>
                        <div className={Css['ben_paas_cen_swarp_img']}>

                            <div className={Css['ben_title']+' '+Css['ben_title_r']}>
                                <strong>革新性PaaS+SaaS福利平台</strong>
                                <p>高度兼容可延展, 赋能企业福利数字化转型</p>
                            </div>
                            <ul>
                                {
                                    props.aPaas.aImg!==undefined?
                                        props.aPaas.aImg.map((item,index)=>{
                                            let temProps='';
                                            if(index===0){
                                                temProps=props.bLouti0
                                            }else if(index===1){
                                                temProps=props.bLouti1
                                            }else if (index===2) {
                                                temProps=props.bLouti2
                                            }else  {
                                                temProps=props.bLouti3
                                            }
                                            return(
                                                <li className={temProps?Css['active']:''} id={'louti'+index} key={index}>
                                                    <img src="//www.guanaitong.com/images/2020/public/loading.gif" data-echo={item.img} alt='' />
                                                </li>
                                            )
                                        })
                                        :''
                                }
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div className={Css['ben_backstage']}>
                <ScrollParallax
                    animation={{y:0, playScale: [0.2, 1.5]}}
                    className={Css['ben_backstage_bg']}
                    style={{backgroundImage:'url('+require('../../assets/images/benefit/ben16.jpg')+')'}} >

                </ScrollParallax>
                <ScrollOverPack
                    always={false}
                    playScale={[0.4, 1]}
                    className={Css['ben_backstage_cen']}>
                    <div className={Css['ben_title']+' '+Css['ben_title_c']}>
                        <strong>HR专属后台，高效统筹管理</strong>
                        <p>福利管理从此得心应手</p>
                    </div>
                    <QueueAnim type={['bottom']}  component="ul">
                        {
                            props.aBack.length>0?
                                props.aBack.map((item,index)=>{
                                    return(
                                        <li key={index}>
                                            {
                                                index!==3?
                                                    <React.Fragment>
                                                        <div className={Css['ben_backstage_title']}>{item.title}</div>
                                                        {
                                                            item.list.length>0?
                                                                item.list.map((item2,index2)=>{
                                                                    return(
                                                                        <div className={Css['ben_backstage_list']} key={index2}>
                                                                            <i className='e60d'></i>
                                                                            {item2.title}
                                                                        </div>
                                                                    )
                                                                })
                                                                :''
                                                        }
                                                    </React.Fragment>
                                                    :
                                                    <div className={Css['ben_backstage_btn']} id="backstageBtn">{item.btn}</div>
                                            }
                                        </li>
                                    )
                                })
                                :''
                        }
                    </QueueAnim>
                </ScrollOverPack>
            </div>
            <div className={Css['ben_welfare']}>
                <div className={Css['ben_welfare_cen']}>
                    <div className={Css['ben_title']}>
                        <strong>{props.aWel!==undefined?props.aWel.title:''}</strong>
                        <p>{props.aWel!==undefined?props.aWel.eTitle:''}</p>
                    </div>
                    <div className={Css['ben_welfare_cen_p']}>
                        <div className={Css['ben_welfare_cen_l']}>
                            {props.aWel!==undefined?props.aWel.list:''}
                        </div>
                        <div className={Css['ben_welfare_cen_r']}>
                            <ul>
                                {
                                   props.aWel.listData!==undefined?
                                        props.aWel.listData.map((item,index)=>{
                                            return(
                                                <li key={index}>
                                                    <p>{item.nub}<sup>{item.sup}</sup></p>
                                                    {item.title}
                                                </li>
                                            )
                                        })
                                       :''
                                }
                            </ul>
                        </div>
                    </div>
                    <div className={props.bWelClick?Css['ben_welfare_cen_logo']:Css['ben_welfare_cen_logo']+' '+Css['active']}>
                        {
                            props.aWel.logo!==undefined?
                                props.aWel.logo.map((item,index)=>{
                                    return(
                                        <ul key={index}>
                                            <li>{item.logoTitle}</li>
                                            {
                                                item.logoImg!==undefined?
                                                    item.logoImg.map((item2,index2)=>{
                                                        return(
                                                            <li key={index2}><img src="//www.guanaitong.com/images/2020/public/loading.gif"
                                                                     data-echo={item2.logoImg} alt=''/></li>
                                                        )
                                                    })
                                                    :''
                                            }
                                        </ul>
                                    )
                                })
                                :''
                        }
                    </div>
                    <div className={props.bWelClick?Css['container']:Css['container']+' '+Css['active']} onClick={props.benWelClick.bind(this)}>
                        <div className={Css['chevron']}></div>
                        <div className={Css['chevron']}></div>
                        <div className={Css['chevron']}></div>
                    </div>
                </div>
            </div>
            <div className={Css['ben_ecology']}>
                <ScrollParallax
                    animation={{y:0, playScale: [0, 1.5]}}
                    className={Css['ben_ecology_bg']}
                    style={{backgroundImage:'url('+require('../../assets/images/benefit/ben22.jpg')+')'}}
                ></ScrollParallax>
                <div className={Css['ben_ecology_cen']}>
                    <div className={Css['ben_title']+' '+Css['ben_title_r']}>
                        <strong>构建个性化福利生态</strong>
                        <p className="befo">体验福利新边界</p>
                    </div>
                    <div className={Css['ben_ecology_cen_swiper']}>
                        <div className={Css['ben_ecology_cen_swiper_big']+' swiper-container'}  id="gallery">
                            <div className="swiper-wrapper">
                                {
                                    props.aEco.bigAEco!==undefined?
                                        props.aEco.bigAEco.map((item,index)=>{
                                            return(
                                                <div className="swiper-slide" key={index}>
                                                    <div className={Css['swiper_slide_big_box']}>
                                                        <div className={Css['swiper_slide_big_box_img']}>
                                                            <img data-src={item.img} alt='' className="swiper-lazy" />
                                                            <div className={Css['activeLoading']}></div>
                                                        </div>
                                                        <div className={Css['swiper_slide_big_box_font']}>
                                                            <i className={item.icn}></i>
                                                            <div className={Css['swiper_slide_big_box_font_box']}>
                                                                <div className={Css['swiper_slide_big_box_font_box_title']}>{item.title}</div>
                                                                <div className={Css['swiper_slide_big_box_font_box_list']}>
                                                                    {
                                                                        item.list!==undefined?
                                                                            item.list.map((item2,index2)=>{
                                                                                return(
                                                                                    <ul key={index2}>
                                                                                        {
                                                                                            item2.listUl!==undefined?
                                                                                                item2.listUl.map((item3,index3)=>{
                                                                                                    return(
                                                                                                        <li key={index3}>
                                                                                                            <span>• </span>
                                                                                                            {item3.title}
                                                                                                        </li>
                                                                                                    )
                                                                                                })
                                                                                                :''
                                                                                        }
                                                                                    </ul>
                                                                                )
                                                                            })
                                                                            :''
                                                                    }
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            )
                                        })
                                        :''
                                }
                            </div>
                        </div>
                        <div className={Css['ben_ecology_cen_swiper_big_pagination']+' ben_ecology_cen_swiper_big_pagination'}></div>
                        <div className={Css['ben_ecology_cen_swiper_small']+' swiper-container'} id="thumbs">
                            <div className="swiper-wrapper">
                                {
                                    props.aEco.smallAEco!==undefined?
                                        props.aEco.smallAEco.map((item,index)=>{
                                            return(
                                                <div className={Css['ben_ecology_cen_swiper_small_items']+' swiper-slide'} key={index} onMouseEnter={props.onMouseOver.bind(this,index)}>
                                                    <div className={Css['ben_ecology_cen_swiper_small_items_box']}>{item.title}</div>
                                                </div>
                                            )
                                        })
                                        :''
                                }
                            </div>
                        </div>
                    </div>

                    <div class={Css['ben_ecology_btn']} id="ben_ecology_btn" onClick={props.goPage.bind(this,props.aEco.url)}>{props.aEco.title}</div>
                </div>
            </div>
            <div className={Css['ben_trus']}>
                <div className={Css['ben_trus_cen']}>
                    <div className={Css['ben_title']}>
                        <strong>13年深耕 值得信赖</strong>
                        <p className={Css['befo']}>B2B2C企业弹性福利平台原创者</p>
                    </div>
                    <ul>
                        {
                            props.aTrus.length>0?
                                props.aTrus.map((item,index)=>{
                                    return(
                                        <li key={index}>
                                            {
                                                index===0?
                                                    <div className={Css['ben_trus_cen_img']}><img
                                                        src="//www.guanaitong.com/images/2020/public/loading.gif" data-echo={item.img} alt=''/>
                                                    </div>:''
                                            }
                                            <div className={Css['ben_trus_cen_font']}>
                                                <div className={index===0?Css['container_trus']:Css['container_trus_r']}>
                                                    <div className={index===0?Css['chevron_trus']:Css['chevron_trus_r']}></div>
                                                    <div className={index===0?Css['chevron_trus']:Css['chevron_trus_r']}></div>
                                                    <div className={index===0?Css['chevron_trus']:Css['chevron_trus_r']}></div>
                                                </div>
                                                <div className={Css['ben_trus_cen_font_title']}>{item.title}</div>
                                                {
                                                    item.list.length>0?
                                                        item.list.map((item2,index2)=>{
                                                            return(
                                                                <div className={Css['ben_trus_cen_font_list']} key={index2}>
                                                                    <i className='e60d'></i>
                                                                    {item2.title}
                                                                </div>
                                                            )
                                                        })
                                                        :''
                                                }
                                            </div>
                                            {
                                                index===1?
                                                    <div className={Css['ben_trus_cen_img']}><img
                                                        src="//www.guanaitong.com/images/2020/public/loading.gif" data-echo={item.img} alt=''/>
                                                    </div>:''
                                            }
                                        </li>
                                    )
                                })
                                :''
                        }
                    </ul>
                </div>
            </div>
            <div className={Css['ben_approve']}>
                <div className={Css['ben_title']+' '+Css['ben_title_c']+' '+Css['ben_title_a']}>
                    <strong>信任，源于超万家企业认可</strong>
                    <p>服务覆盖全行业客户</p>
                </div>
                <div className={Css['indCliSwiper']+' indCliSwiper'}>
                    <div className="swiper-wrapper">
                        {
                            props.aCli.length>0?
                                props.aCli.map((item,index)=>{
                                    return(
                                        <div className={Css['swiper-slide']+' swiper-slide'} key={index}>
                                            <img className="swiper-lazy" data-src={item.img} alt='' />
                                            <div className={Css['activeLoading']}></div>
                                        </div>
                                    )
                                })
                                :''
                        }
                    </div>
                    <div className={Css['indCliSwiperSagination']+' indCliSwiperSagination'}></div>
                    <div className={Css['indCliSwiperNext']+' indCliSwiperNext'}></div>
                    <div className={Css['indCliSwiperPrev']+' indCliSwiperPrev'}></div>
                </div>
            </div>
            <div className={Css['ben_experience']}>
                <ScrollParallax
                    animation={{y:0, playScale: [0, 1]}}
                    className={Css['ben_experience_bg']}
                    style={{backgroundImage:'url('+require('../../assets/images/benefit/ben25.jpg')+')'}}
                ></ScrollParallax>
                <div className={Css['ben_experience_cen']}>
                    <div className={Css['ben_title']+' '+Css['ben_title_w']+' '+Css['ben_title_c']}>
                        <strong>福利新风貌，即刻体验</strong>
                        <p>赋能企业员工全生命周期福利管理</p>
                    </div>
                    <div className={Css['ben_experience_cen_btn']}>
                        <div className={Css['ben_experience_cen_btn_list']} id="ben_tj_btn" onClick={props.goPage.bind(this,'from')}>免费体验</div>
                        <div className={Css['ben_experience_cen_btn_list']} id="ben_zx_btn" onClick={props.goPage.bind(this,'//dbt.zoosnet.net/LR/Chatpre.aspx?id=DBT96208203&lng=cn')}>方案咨询</div>
                    </div>
                </div>
            </div>
        </div>
    )
})


class benefit extends React.Component{
    constructor(){
        super();
        this.state={
            title:'员工福利积分-中智关爱通',
            description:'关爱通为企业提供弹性福利解决方案,以积分发放形式满足全体员工个性化需求,控制企业总体成本解决企业成本管理和员工满意度的矛盾',
            keywords:'弹性福利,弹性福利平台,弹性福利外包,弹性福利外包,弹性福利供应商,企业弹性福利,员工弹性福利',
            aBan:[],
            aDes:[],
            aDig:[],
            aScren:[],
            aPaas:[],
            aBack:[],
            aWel:[],
            aEco:{},
            aTrus:[],
            aCli:[],
        }
    }
    componentDidMount(){
        this.goSystem();
        this.getABanData();
        this.getADesData();
        this.getADigData();
        this.getAScrenData();
        this.getAPaasData();
        this.getABackFata();
        this.getAWelData();
        this.getAEcoData();
        this.getATrusData();
        this.getACliData();
        changeTdk(this.state.title,this.state.description,this.state.keywords);
        setScrollTop(window.base.pages.index.iScrollTop);
    }
    //判断跳转平台
    goSystem(){
        goSystem(this.props,'benefit')
    }
    //获取banner数据
    getABanData(){
        let temABan=[
            {
                bg:require('../../assets/images/benefit/ben1.jpg'),
                title:'<strong>数字化全场景弹性福利平台</strong>互联网+重构组织与员工关系<span>深耕企业福利13年  服务企业18000+  覆盖员工700万+</span>',
                btn:'申请试用',
                url:'from'
            }
        ];
        this.setState({aBan:temABan})
    }
    //获取描述数据
    getADesData(){
        let temADes=[
            {
                title:' 关爱通基于<span>“给到”</span>平台<br />提供360°数字化全场景员工福利解决方案<br />帮助企业一站式实现员工关爱与激励,激发组织活力<br />提升人才竞争力及雇主品牌形象',
            }
        ];
        this.setState({aDes:temADes})
    }
    //获取数据化数据
    getADigData(){
        let temADig=[
            {
               icn:'e63f',
               title:'企业',
               list:'一站福利采购，福利发放效率提升\n' +
                   '福利预算统筹管理，企业成本降低\n' +
                   '福利选择多样化，员工满意度提升'
            },
            {
                icn:'e618',
                title:'财务',
                list:'紧贴国家法规，合规税务筹划\n' +
                    '合理账目分科，专款专用\n' +
                    '一站福利采购，轻松应对结算难题'
            },
            {
                icn:'e611',
                title:'HR',
                list:'福利预算一站统筹，数据汇总易汇报\n' +
                    '福利发放全记录，员工价值感受显著提升\n' +
                    '原生业务兼容，现有系统/供应商无缝对接'
            },
            {
                icn:'e685',
                title:'员工',
                list:'海量福利消费通路，个性需求全满足\n' +
                    '移动端“给到”平台，专属福利随身行\n' +
                    '专业售前售后服务，福利体验全升级'
            }
        ];
        this.setState({aDig:temADig})
    }
    // 获取aScren数据
    getAScrenData(){
        let temAScren=[
            {
                img:require('../../assets/images/benefit/ben3.jpg'),
                title:'节日',
                url:'nj',
                list:[
                    {title:'全年九大节日福利套餐，线下/线上版本随心选'},
                    {title:'品牌实物团购，一线品牌最低3折起'},
                    {title:'全方位定制服务，个性化福利需求全满足'},
                ]
            },
            {
                img:require('../../assets/images/benefit/ben4.jpg'),
                title:'午餐',
                url:'scene',
                list:[
                    {title:'兼顾企业午餐补贴发放/统一供餐双重模式，兼容企业现有供应商'},
                    {title:'覆盖员工午餐/商务接待/外卖订餐/食材采购多重需求'},
                ]
            },
            {
                img:require('../../assets/images/benefit/ben5.jpg'),
                title:'激励',
                url:'//cardmall-online.guanaitong.com/index/introduction',
                list:[
                    {title:'项目激励、即时认可，一键发放实时到账，提升员工价值感受'},
                    {title:'员工互赞表达谢意，团结协作汇聚职场正能量'},
                ]
            },
            {
                img:require('../../assets/images/benefit/ben6.jpg'),
                title:'EAP心理关怀',
                url:'eap',
                list:[
                    {title:'资深EAP行业专家团队，提供员工心理咨询/测评/微课多项服务'},
                    {title:'平台内置“答心”应用，掌上心理顾问7*24H随身行'},
                ]
            },
            {
                img:require('../../assets/images/benefit/ben7.jpg'),
                title:'企业文化建设',
                url:'//cardmall-online.guanaitong.com/cpIndex/nav/enterpriseBroadcast',
                list:[
                    {title:'平台内嵌丰富职场功能应用，营造积极健康的企业氛围'},
                    {title:'HR轻松发布企业活动，员工在线查看报名'},
                ]
            },
            {
                img:require('../../assets/images/benefit/ben8.jpg'),
                title:'体检',
                url:'tj',
                list:[
                    {title:'整合业内主流体检机构及公立医院资源，覆盖全国100+城市500+门店'},
                    {title:'一站式在线预约，标准化套餐/自由行/血液轻体检多重选择'},
                ]
            },
            {
                img:require('../../assets/images/benefit/ben9.jpg'),
                title:'生日/纪念日',
                url:'nj',
                list:[
                    {title:'线上/线下版生日福利套餐'},
                    {title:'生日汇赠礼庆生'},
                    {title:'员工入职/周年纪念日精美电子贺卡'},
                ]
            },
            {
                img:require('../../assets/images/benefit/ben10.jpg'),
                title:'差旅交通',
                url:'scene',
                list:[
                    {title:'覆盖员工商务差旅机票酒店、通勤打车、同事拼车等多种出行需求'},
                ]
            },
            {
                img:require('../../assets/images/benefit/ben11.jpg'),
                title:'加班',
                url:'scene',
                list:[
                    {title:'加班餐补/加班车补，员工便捷一键领取'},

                ]
            }
        ];
        this.setState({aScren:temAScren})
    }
    // 获取福利平台数据
    getAPaasData(){
        let temAPaas={
            aFont:[
                {
                    title:'延展性',
                    enTitle:'Extendibility',
                    list:'平台支持企业自主拓展开发应用，延伸多重实用职场功能'
                },
                {
                    title:'兼容性',
                    enTitle:'Compatibility',
                    list:'高度兼容第三方平台，无缝对接企业原供应商系统、<br />人事系统和财务管理体系'
                },
                {
                    title:'安全性',
                    enTitle:'Safety',
                    list:'ISO/IEC 27001:2013 GB/T 22080-2016<br />信息安全管理体系认证全面保障企业数据安全'
                },
                {
                    title:'实时性',
                    enTitle:'Realtime',
                    list:'实时监测福利数据，精准反馈员工诉求，提升HR工作效率'
                },
            ],
            aImg:[
                {
                    img:require('../../assets/images/benefit/ben12.jpg')
                },
                {
                    img:require('../../assets/images/benefit/ben13.jpg')
                },
                {
                    img:require('../../assets/images/benefit/ben14.jpg')
                },
                {
                    img:require('../../assets/images/benefit/ben15.jpg')
                },
            ]
        };
        this.setState({aPaas:temAPaas})
    }
    //获取后台管理数据
    getABackFata(){
        let temABack=[
            {
                title:'资产管理',
                list:[
                    {title:'账目分科清晰全览，全线产品一站整合'},
                    {title:'福利发放记录/明细详情轻松查看'},
                    {title:'统一配置全年福利计划，定时生效'},
                ]
            },
            {
                title:'员工管理',
                list:[
                    {title:'员工信息批量导入，信息模板自定义'},
                    {title:'支持复杂组织架构福利分级管理'},
                    {title:'配备员工内宣工具，一键邀请员工入驻'},
                ]
            },
            {
                title:'数据报告',
                list:[
                    {title:'基于独家福利管理模型跟踪分析，生成月度年度可视化数据报表'},
                    {title:'实时监测平台使用动态，深度聚焦员工活跃度'},
                    {title:'助力HR推进福利发放进程，提升工作效率'},
                ]
            },
            {
                btn:'咨询客服',
                url:'//dbt.zoosnet.net/LR/Chatpre.aspx?id=DBT96208203&lng=cn'
            }
        ];
        this.setState({aBack:temABack})
    }
    //获取福利体检数据
    getAWelData(){
        let temAWel={
            title:'“给到”员工理想福利体验',
            eTitle:'传递关爱，激发组织活力',
            list:'移动端“给到“平台全面整合垂直领域优质供应商，汇集知名品牌资源搭建自营关爱商城，拓展品牌直连商城，同时兼容企业原有供应商，赋予员工高自由度福利选择，满足员工个性化需求，升级员工福利体验，提升企业福利效能。',
            listData:[
                {
                    nub:'200',
                    sup:'+',
                    title:'主流优质供应商'
                },
                {
                    nub:'100W',
                    sup:'+',
                    title:'精选实物商品'
                },
                {
                    nub:'20000',
                    sup:'+',
                    title:'自营商城商品'
                }
            ],
            logo:[
                {
                    logoTitle:'电商购物',
                    logoImg:[
                        {
                            logoImg:require('../../assets/images/benefit/ben11.png')
                        },
                        {
                            logoImg:require('../../assets/images/benefit/ben12.png')
                        },
                        {
                            logoImg:require('../../assets/images/benefit/ben13.png')
                        },
                        {
                            logoImg:require('../../assets/images/benefit/ben14.png')
                        },
                        {
                            logoImg:require('../../assets/images/benefit/ben15.png')
                        }
                    ]
                },
                {
                    logoTitle:'美食餐饮',
                    logoImg:[
                        {
                            logoImg:require('../../assets/images/benefit/ben16.png')
                        },
                        {
                            logoImg:require('../../assets/images/benefit/ben17.png')
                        },
                        {
                            logoImg:require('../../assets/images/benefit/ben18.png')
                        },
                        {
                            logoImg:require('../../assets/images/benefit/ben19.png')
                        },
                        {
                            logoImg:require('../../assets/images/benefit/ben20.png')
                        }
                    ]
                },
                {
                    logoTitle:'生活服务',
                    logoImg:[
                        {
                            logoImg:require('../../assets/images/benefit/ben21.png')
                        },
                        {
                            logoImg:require('../../assets/images/benefit/ben22.png')
                        },
                        {
                            logoImg:require('../../assets/images/benefit/ben23.png')
                        },
                        {
                            logoImg:require('../../assets/images/benefit/ben24.png')
                        },
                        {
                            logoImg:require('../../assets/images/benefit/ben25.png')
                        }
                    ]
                },
                {
                    logoTitle:'交通出行',
                    logoImg:[
                        {
                            logoImg:require('../../assets/images/benefit/ben26.png')
                        },
                        {
                            logoImg:require('../../assets/images/benefit/benc1.png')
                        },
                        {
                            logoImg:require('../../assets/images/benefit/ben27.png')
                        },
                        {
                            logoImg:require('../../assets/images/benefit/ben28.png')
                        },
                        {
                            logoImg:require('../../assets/images/benefit/ben29.png')
                        },

                    ]
                },
                {
                    logoTitle:'教育培训',
                    logoImg:[
                        {
                            logoImg:require('../../assets/images/benefit/ben30.png')
                        },
                        {
                            logoImg:require('../../assets/images/benefit/ben31.png')
                        },
                        {
                            logoImg:require('../../assets/images/benefit/ben32.png')
                        },
                        {
                            logoImg:require('../../assets/images/benefit/ben33.png')
                        },
                        {
                            logoImg:require('../../assets/images/benefit/ben34.png')
                        },

                    ]
                },
                {
                    logoTitle:'休闲娱乐',
                    logoImg:[
                        {
                            logoImg:require('../../assets/images/benefit/ben35.png')
                        },
                        {
                            logoImg:require('../../assets/images/benefit/ben36.png')
                        },
                        {
                            logoImg:require('../../assets/images/benefit/ben37.png')
                        },
                        {
                            logoImg:require('../../assets/images/benefit/ben38.png')
                        },
                        {
                            logoImg:require('../../assets/images/benefit/ben39.png')
                        },
                    ]
                },

            ]
        };


        this.setState({aWel:temAWel})
    }
    //获取福利生态数据
    getAEcoData(){
        let temAEco={
            title:'定制您的专属福利方案',
            url:'//dbt.zoosnet.net/LR/Chatpre.aspx?id=DBT96208203&lng=cn',
            bigAEco:[
                {
                    img:require('../../assets/images/benefit/ben17.jpg'),
                    icn:'e6e1',
                    title:'福利全案定制',
                    list:[
                        {
                            listUl:[
                                {
                                    title:'结合企业战略和规划进行全面需求调研、基准化分析及风险评估，精准制定专属福利方案，并提供持续运营保障。'
                                }
                            ]
                        }
                    ]

                },
                {
                    img:require('../../assets/images/benefit/ben18.jpg'),
                    icn:'e69e',
                    title:'创意内宣设计',
                    list:[
                        {
                            listUl:[
                                {
                                    title:'企业内宣海报、H5设计定制 '
                                },
                                {
                                    title:'“给到”平台/企业标识/页面等个性化设计定制 '
                                }
                            ]
                        },
                        {
                            listUl:[
                                {
                                    title:'帮助企业提升文化宣导，实现企业专属视觉传达，提升员工认同感和满意度'
                                }
                            ]
                        }
                    ]

                },
                {
                    img:require('../../assets/images/benefit/ben19.jpg'),
                    icn:'e68f',
                    title:'应用自由配置',
                    list:[
                        {
                            listUl:[
                                {
                                    title:'平台全线应用自由选择'
                                },
                                {
                                    title:'企业根据自身需求进行应用配置，员工可见性一键设置'
                                }
                            ]
                        }
                    ]

                },
                {
                    img:require('../../assets/images/benefit/ben20.jpg'),
                    icn:'e655',
                    title:'福利套餐/节日礼盒定制',
                    list:[
                        {
                            listUl:[
                                {
                                    title:'支持福利套餐商品自选、个性化配置'
                                },
                                {
                                    title:'支持节日礼盒设计定制、礼品品牌自定义'
                                }
                            ]
                        }
                    ]

                },
                {
                    img:require('../../assets/images/benefit/ben21.jpg'),
                    icn:'e7f0',
                    title:'企业福利新玩法',
                    list:[
                        {
                            listUl:[
                                {
                                    title:'支持结合企业文化和特性自定义福利体系'
                                },
                                {
                                    title:'支持企业自定义福利积分应用账户及对应使用场景'
                                }
                            ]
                        }
                    ]

                }
            ],
            smallAEco:[
                {
                    title:'福利全案定制'
                },
                {
                    title:'创意内宣设计'
                },
                {
                    title:'应用自由配置'
                },
                {
                    title:'福利套餐/礼盒定制'
                },
                {
                    title:'企业福利新玩法'
                }
            ]
        };
        this.setState({aEco:temAEco})
    }
    //获取值得信赖数据
    getATrusData(){
        let temATrus=[
            {
                img:require('../../assets/images/benefit/ben23.jpg'),
                title:'资深团队',
                list:[
                    {
                        title:'福利/咨询/健康行业专家团队'
                    },
                    {
                        title:'百人以上平台技术团队'
                    },
                    {
                        title:'24小时服务器监控团队'
                    },
                    {
                        title:'精英销售团队'
                    }
                ]
            },
            {
                img:require('../../assets/images/benefit/ben24.jpg'),
                title:'专业服务',
                list:[
                    {
                        title:'秉承“首问责任制”与“率先赔付机制”'
                    },
                    {
                        title:'400热线安心售后服务'
                    },
                    {
                        title:'销售经理/企业客服/培训师多对一专享服务'
                    },
                    {
                        title:'亿级数据处理能力，服务网络覆盖全国'
                    }
                ]
            }
        ];
        this.setState({aTrus:temATrus})
    }
    //获取企业认可数据
    getACliData(){
        let temACli=[
            {
                img:require('../../assets/images/benefit/ben46.png')
            },
            {
                img:require('../../assets/images/benefit/ben47.png')
            },
            {
                img:require('../../assets/images/benefit/ben48.png')
            },
            {
                img:require('../../assets/images/benefit/ben49.png')
            },
            {
                img:require('../../assets/images/benefit/ben50.png')
            },
            {
                img:require('../../assets/images/benefit/ben51.png')
            },
            {
                img:require('../../assets/images/benefit/ben52.png')
            },
            {
                img:require('../../assets/images/benefit/ben53.png')
            },
            {
                img:require('../../assets/images/benefit/ben54.png')
            },
            {
                img:require('../../assets/images/benefit/ben55.png')
            },
            {
                img:require('../../assets/images/benefit/ben56.png')
            },
            {
                img:require('../../assets/images/benefit/ben57.png')
            },
            {
                img:require('../../assets/images/benefit/ben58.png')
            },
            {
                img:require('../../assets/images/benefit/ben59.png')
            },
            {
                img:require('../../assets/images/benefit/ben60.png')
            },
            {
                img:require('../../assets/images/benefit/ben61.png')
            },
            {
                img:require('../../assets/images/benefit/ben62.png')
            },
            {
                img:require('../../assets/images/benefit/ben63.png')
            }
        ];
        this.setState({aCli:temACli})
    }
    //页面离开时调用，页面离开时去除滚动事件解决页面切换时内存泄漏，
    componentWillUnmount(){
        window.removeEventListener('scroll',setScrollTop());
        this.setState=(state,callback)=>{
            return;
        }
    }
    render(){
        let newProps={
            aBan:this.state.aBan,
            aDes:this.state.aDes,
            aDig:this.state.aDig,
            aScren:this.state.aScren,
            aPaas:this.state.aPaas,
            aBack:this.state.aBack,
            aWel:this.state.aWel,
            aEco:this.state.aEco,
            aTrus:this.state.aTrus,
            aCli:this.state.aCli,
        }
        return(
            <div>
                <Suspense　fallback={<div className={'loadWidth'}></div>} >
                    {/*导航*/}
                    <Nav props={this.props}></Nav>
                    {/*导航*/}
                    {/*右导航*/}
                    <RNav props={this.props}></RNav>
                    {/*右导航*/}
                </Suspense >
                <BenefitComponent {...this.props} {...newProps}></BenefitComponent>
                <Suspense　fallback={<React.Fragment/>} >
                    {/*foot*/}
                    <Foot  props={this.props}></Foot>
                    {/*foot*/}
                </Suspense>
            </div>
        )
    }
}
export default benefit